<!DOCTYPE html>
<html lang="">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
</head>

<body>
  <script>
    // 原数据
    let person = {
      name: '张三',
      age: 18,
    }
    
    // 代理数据 
    
    // 使用ES6的Proxy代理person对象
    // 读取proxyPerson的属性时，会自动执行get方法
    // 修改或添加proxyPerson的属性时，会自动执行set方法
    // 删除proxyPerson的属性时，会自动执行deleteProperty方法
    const proxyPerson = new Proxy(person, {
      get(target, propName) {
        console.log('读取了：' + propName + " 可以实现响应式");
        return Reflect.get(target, propName);
      },
      set(target, propName, value) {
        console.log('添加 或 修改了：' + propName + " 可以实现响应式");
        Reflect.set(target, propName, value);
      },
      deleteProperty(target, propName) {
        console.log('删除了：' + propName + " 可以实现响应式");
        return Reflect.deleteProperty(target, propName);
      }
    });


    console.log('person', person);
    console.log('proxyPerson', proxyPerson);

    function getName() {
      console.log(proxyPerson.name);
      console.log('person', person);
      console.log('proxyPerson', proxyPerson);
    }

    function updateName() {
      proxyPerson.name = '李四';
      console.log('person', person);
      console.log('proxyPerson', proxyPerson);
    }
    function addsex() {
      proxyPerson.sex = '女';
      console.log("能添加，但无法实现响应式");
      console.log('person', person);
      console.log('proxyPerson', proxyPerson);
    }

    function deleteName() {
      console.log(delete proxyPerson.name, "配置了 configurable: true 能删除，但无法实现响应式");
      console.log('person', person);
      console.log('proxyPerson', proxyPerson);
    }

  </script>
  <h2>vue 3 响应式</h2>
  <button onclick="getName()">读取名称</button>
  <br><br>
  <button onclick="updateName()">修改名称为 李四</button>
  <br><br>
  <button onclick="addsex()">添加性别为 女</button>
  <br><br>
  <button onclick="deleteName()">删除名称属性</button>
</body>

</html>